<template>
	<view>
		<video :src="src" :poster="poster" :controls="false" :show-play-btn="false" 
			:style="{ height: height,width: width }" :loop="false"
			:enable-progress-gesture="false" :autoplay="true" @click="clickVideo" :objectFit="short?'':'fill'"
			:id="`video_${src}`" ref="`video_${src}`" class="video" @timeupdate="timeupdate"></video>
		<!-- <cover-view class="progressBar" :style="{ width: barWidth }"></cover-view> -->
	</view>
</template>

<script>
	export default{ 
		props:{
			src:{
				type:String,
				default:''
			},
			poster:{
				type:String,
				default:''
			},
			play:{
				type:Boolean,
				default:false
			},
			short:{
				type:Boolean,
				default:false
			},
			height:{
				type:String,
				default:''
			},
			width:{
				type:String,
				default:''
			},
			duration:{
				type:Number,
				default:0
			}
		},
		data(){
			return{
				time:0
			}
		},
		methods:{
			timeupdate(event){
				if(this.time>=this.duration) this.time=0
				this.time = this.time + 0.25 
				
			},
			clickVideo(){
				//this.$emit('click')
			},
			videoPlay(){
				if(this.play){
					this.videoCtx = uni.createVideoContext(`video_${this.src}`,this);
					this.videoCtx.play();
				}else{
					this.videoCtx = uni.createVideoContext(`video_${this.src}`,this);
					this.videoCtx.pause();
				}
				
			}
		},
		watch:{
			play(newVal,oldVal){
				this.videoPlay()
			}
		},
		computed:{
			barWidth(){
				let width = this.time/this.duration*parseInt(this.width)
				return `${width}px`
			}
		}
	}
</script>

<style>
	page{background-color: #CCCCCC;}
	.video{
		width: 100%;
		height: 100%;
		background-color: #CCCCCC;
	}
</style>
